/*
 * @Author: Drc
 * @Date: 2020-06-12 13:41:28
 * @LastEditors: Drc
 * @LastEditTime: 2021-12-20 15:10:27
 */
import React from 'react'
import {createBottomTabNavigator, BottomTabBar} from '@react-navigation/bottom-tabs'
import {Text, View, Image, Platform} from 'react-native'
import {px2dp} from '@path/config/system'
import Locale from '@path/locale'
import {useSelector} from 'react-redux'
import _ from 'lodash'
import {RootState} from '@path/redux'
import {ThemeText} from '@path/components/ThemeComponents'
import Theme from '@path/config/theme'
import Home from '@path/pages/home'
import User from '@path/pages/user'

const Tab = createBottomTabNavigator()

const TabStack = () => {
  const iconSize = px2dp(24)

  useSelector(
    (state: RootState) => state.global,
    (prev, next) => _.isEqual(prev, next),
  )

  return (
    <Tab.Navigator
      sceneContainerStyle={{backgroundColor: Theme.getThemeColor('bg')}}
      screenOptions={({route}) => {
        return {
          tabBarStyle: {
            borderTopColor: 'rgba(0,0,0,0.05)',
            paddingTop: Platform.OS === 'ios' ? 8 : 6,
            marginBottom: Platform.OS === 'ios' ? 0 : 4,
            shadowOpacity: 0,
            elevation: 0,
          },
          tabBarAllowFontScaling: false,
          tabBarLabelPosition: 'below-icon',
          tabBarLabel: ({focused}) => (
            <ThemeText
              style={{
                color: focused ? Theme.getThemeColor('theme') : Theme.getThemeColor('text_minor'),
                textAlign: 'center',
                padding: 0,
                margin: 0,
                marginTop: Platform.OS === 'ios' ? 6 : 0,
                fontSize: 9,
              }}>
              {Locale.getString(`tab.${route.name?.toLocaleLowerCase()}`)}
            </ThemeText>
          ),
        }
      }}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={({route, navigation}) => ({
          headerShown: false,
          tabBarIcon: ({focused}) => {
            return (
              <Image
                style={{width: iconSize, height: iconSize}}
                source={focused ? Locale.getImage('tab_home_sel') : Locale.getImage('tab_home')}
              />
            )
          },
        })}
      />
      <Tab.Screen
        name="User"
        component={User}
        options={() => ({
          tabBarIcon: ({focused}) => {
            return (
              <Image
                style={{width: iconSize, height: iconSize}}
                source={focused ? Locale.getImage('tab_user_sel') : Locale.getImage('tab_user')}
              />
            )
          },
        })}
      />
    </Tab.Navigator>
  )
}

const TabBar = (props: any) => (
  <View style={{backgroundColor: '#fff'}}>
    <BottomTabBar
      {...props}
      style={{
        backgroundColor: '#fff',
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        borderTopColor: 'transparent',
        shadowOffset: {width: -3.5, height: -3.5},
        shadowColor: '#000',
        shadowRadius: 12,
        shadowOpacity: 0.2,
      }}
    />
  </View>
)

export default TabStack
